<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs v-model="tabIndex" @tab-click="getList(1)">
          <el-tab-pane v-for="(item,index) in headeNum" :key="index" :name="item.id.toString()" :label="item.name" />
        </el-tabs>

        <div>
          <div class="container">
            <el-form size="small" :inline="true">
              <el-form-item label="姓名：">
                <el-input v-model="tableFrom.real_name" placeholder="请输入姓名" class="selWidth" @keyup.enter.native="getList(1)">
                  <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
                </el-input>
              </el-form-item>

              <el-form-item label="联系电话：">
                <el-input v-model="tableFrom.mobile" placeholder="请输入联系电话" class="selWidth" @keyup.enter.native="getList(1)">
                  <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
                </el-input>
              </el-form-item>
            </el-form>
          </div>


        </div>

        <el-table
          v-loading="listLoading"
          :data="tableData.data"
          style="width: 100%"
          size="mini"
          name="m0"
          :row-key="(row) => { return row.mobile }"
        >

          <el-table-column prop="user_id" label="用户ID" min-width="60" />
          <el-table-column prop="real_name" label="真实姓名" min-width="60" />
          <el-table-column prop="card_code" label="身份证号码" min-width="100" />
          <el-table-column prop="phone" label="联系电话" />
          <el-table-column prop="city" label="市" />
          <el-table-column prop="status" label="状态" min-width="50">
            <template slot-scope="scope">
              <span v-if="scope.row.status==0" style="color:red">待审核</span>
              <span v-if="scope.row.status==1" style="color:limegreen">工号已通过</span>
            </template>
          </el-table-column>

          <el-table-column label="身份证正面图" min-width="80">
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <el-image
                  style="width: 36px; height: 36px"
                  :src="scope.row.card_front?scope.row.card_front:moren"
                  :preview-src-list="[scope.row.card_front?scope.row.card_front:moren]"
                />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="身份证反面图" min-width="80">
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <el-image
                  style="width: 36px; height: 36px"
                  :src="scope.row.card_back?scope.row.card_back:moren"
                  :preview-src-list="[scope.row.card_back?scope.row.card_back:moren]"
                />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="手持协议照片" min-width="80">
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <el-image
                  style="width: 36px; height: 36px"
                  :src="scope.row.hand_agreement?scope.row.hand_agreement:moren"
                  :preview-src-list="[scope.row.hand_agreement?scope.row.hand_agreement:moren]"
                />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="门头图" min-width="80">
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <el-image
                  style="width: 36px; height: 36px"
                  :src="scope.row.door_head?scope.row.door_head:moren"
                  :preview-src-list="[scope.row.door_head?scope.row.door_head:moren]"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="申请时间" />
          <el-table-column prop="tool" :label="tabIndex==0?'操作':'通过时间'" min-width="130">
            <template slot-scope="scope">
              <div v-if="tabIndex==0">
                <el-link type="primary" @click="saveData(scope.row)">确认通过</el-link>
                <el-link type="danger" style="margin-left:10px" @click="setNot(scope.row,2)">拒绝未通过</el-link>
              </div>
              <div v-else>
                {{scope.row.update_time}}
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableFrom.limit" :current-page="tableFrom.page" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange" @current-change="pageChange" />
        </div>

      </div>
    </el-card>

    <el-dialog title="拒绝备注" :visible.sync="realStatus">
      <el-form :model="form">

        <el-form-item label="拒绝理由" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            placeholder="拒绝未通过理由"
            :rows="5"
            v-model="form.mome"
          >
          </el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="realStatus = false">取 消</el-button>
        <el-button type="primary" @click="backUser">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {
  getRealPhoneList,
  backUserStatus,
  realSetStatus
} from '@/api/phone'
import {
  roterPre
} from '@/settings'
import SettingMer from '@/libs/settingMer'
import { getToken } from '@/utils/auth'
export default {
  name: 'PhoneList',
  components: {},
  data() {
    return {
      fileUrl: SettingMer.https + '/store/import/phone',
      moren: require("@/assets/images/bjt.png"),
      myHeaders: { 'X-Token': getToken() },
      roterPre: roterPre,
      tabIndex: '0',
      headeNum: [
        {
          id: 0,
          name: '待审核工号'
        },
        {
          id: 1,
          name: '已通过工号'
        }
      ],
      fileList: [],

      tableData: [],
      listLoading: false,
      tableFrom: {
        page: 1,
        limit: 20
      },
      form:{
        mome:""
      },
      editInfo:{},
      title:"",
      formLabelWidth: '100px',
      realStatus:false
    }
  },
  mounted() {
    this.getList(1)
  },
  methods: {

    // 列表
    getList(num) {
      this.listLoading = true
      this.tableFrom.page = num || this.tableFrom.page
      this.tableFrom.status = this.tabIndex;
      this.tableData.data = []

      getRealPhoneList(this.tableFrom).then(res => {
        this.tableData.data = res.data.list
        this.tableData.total = res.data.count
        this.listLoading = false
      }).catch(res => {
        this.listLoading = false
        this.$message.error(res.message)
      })

    },

    /**
     * 拒绝
     * @param {Object} item
     */
    setNot(item){
      item.realNowStatus=2;
      this.editInfo=item;
      this.realStatus=true;
    },
    /**
     * 拒绝保存
     */
    backUser(){
      let item=this.editInfo;
      let status=item.realNowStatus;
      let msg=`您确认要拒绝吗？确认后将退回给用户！`;
      if(this.form.mome==""){
        this.$message.error("请输入决绝理由~")
        return;
      }
      this.$confirm(msg).then(res=> {
        if(res=="confirm"){
          backUserStatus({
            id:item.id,
            mome:this.form.mome
          }).then(res=>{
            this.realStatus=false;
            this.getList(1)
             this.$message.success(res.message)
          }).catch(res=>{
             this.$message.error(res.message)
          })
        }
      }).catch(res=>{})
    },

    /**
     * 保存数据
     */
    saveData(item){
      let msg=`您确认资料已经通过吗？通过后将会通知用户！`;

      this.$confirm(msg).then(res=> {
        if(res=="confirm"){
          realSetStatus({
            id:item.id
          }).then(res=>{
            this.getList(1)
             this.$message.success(res.message)
          }).catch(res=>{
             this.$message.error(res.message)
          })
        }
      }).catch(res=>{})
    },

    changeNum(e){
      let val=Number(e)
      this.form.one=0
      this.form.two=0
      if(val!="" && val>0 && (typeof val === 'number' && !isNaN(val)) ){
        this.form.one=val*0.42
        this.form.two=val*0.2
      }

    },

    myIsNaN(value) {

       document.write(+"<br>");

    },

    pageChange(page) {
      this.tableFrom.page = page
      this.getList('')
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList('')
    }

  }
}
</script>

<style scoped lang="scss">

</style>
